<template>
  <div>
    <p>
      <button class="btn btn-white btn-default btn-round" @click="add()">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
      &nbsp;
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
    </p>

    <pagination ref="pagination" :list="list"></pagination>

    <div class="row">
      <div v-for="teacher in teachers" class="col-md-3">
        <div>
          <span class="profile-picture">
            <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty" src="/admin/static//image/讲师头像/profile-pic.jpg" :title="teacher.intro"/>
            <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty" :src="teacher.image" :title="teacher.intro"/>
          </span>

          <div class="space-4"></div>

          <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
            <div class="inline position-relative">
              <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                <i class="ace-icon fa fa-circle light-green"></i>
                &nbsp;
                <span class="white">{{teacher.position}}</span>
              </a>
            </div>
          </div>
        </div>

        <div class="space-6"></div>

        <div class="text-center">
          <a href="javascript:;" class="text-info bigger-110" :title="teacher.motto">
            <i class="ace-icon fa fa-user"></i>
            {{teacher.name}}【{{teacher.nickname}}】
          </a>
        </div>

        <div class="space-6"></div>

        <div class="profile-social-links align-center">
          <button v-on:click="edit(teacher)" class="btn btn-xs btn-info">
            <i class="ace-icon fa fa-pencil bigger-120"></i>
          </button>
          &nbsp;
          <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
            <i class="ace-icon fa fa-trash-o bigger-120"></i>
          </button>
        </div>

        <div class="hr hr16 dotted"></div>

      </div>
    </div>

    <!-- Modal -->
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">讲师表单</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input class="form-control" v-model="teacher.name">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                  <input class="form-control" v-model="teacher.nickname">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <big-file :text="'上传头像'"
                        :input-id="'avatar-upload'"
                        :suffixs="['jpg', 'jpeg', 'png']"
                        :use="FILE_USE.TEACHER.key"
                        :after-upload="afterUpload"></big-file>
                  <div v-show="teacher.image" class="row">
                    <div class="col-md-4">
                      <img :src="teacher.image" class="img-responsive">
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">职位</label>
                <div class="col-sm-10">
                  <input class="form-control" v-model="teacher.position">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">座右铭</label>
                <div class="col-sm-10">
                  <input class="form-control" v-model="teacher.motto">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">简介</label>
                <div class="col-sm-10">
                  <textarea class="form-control" v-model="teacher.intro" rows="5"></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="save()">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Pagination from "../../components/pagination"
  import BigFile from  '../../components/big-file'

  export default {
    name: "business-teacher",
    components: {Pagination, BigFile},
    data() {
      return {
        teacher: {
          id: null,
          name: null,
          nickname: null,
          image: null,
          position: null,
          motto: null,
          intro: null,
        },
        teachers: [],
        FILE_USE: FILE_USE // 左边是组件变量, 右边是全局变量, 在vue中读不到全局变量
      }
    },
    mounted() {
      let _this = this
      _this.list(1)
    },
    methods: {
      /**
       * 获取讲师（分页）
       * @param page
       */
      list(page) {
        let _this = this

        Loading.show()

        _this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/list', {
          page: page,
          size: _this.$refs.pagination.size
        }).then((resp) => {
          if (resp.data.success) {
            _this.teachers = resp.data.content.list
            _this.$refs.pagination.render(page, resp.data.content.total)

            Loading.hide()
          } else {
            Loading.hide()
          }
        })
      },

      /**
       * 添加讲师（显示模态框）
       */
      add() {
        let _this = this
        _this.teacher = {
          id: null,
          name: null,
          nickname: null,
          image: null,
          position: null,
          motto: null,
          intro: null,
        }
        //  开启模态框
        $("#form-modal").modal('show')
      },

      /**
       * 编辑讲师（显示模态框）
       */
      edit(teacher) {
        let _this = this
        //  Object.assign(target, source)方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target)
        Object.assign(_this.teacher, teacher)
        //  开启模态框
        $("#form-modal").modal('show')
      },

      /**
       * 保存讲师
       */
      save() {
        let _this = this

        //  保存校验
        if (1 != 1
          || !Validator.require(_this.teacher.name, "姓名")
          || !Validator.length(_this.teacher.name, "姓名", 1, 50)
          || !Validator.length(_this.teacher.nickname, "昵称", 1, 50)
          || !Validator.length(_this.teacher.image, "头像", 1, 100)
          || !Validator.length(_this.teacher.position, "职位", 1, 50)
          || !Validator.length(_this.teacher.motto, "座右铭", 1, 50)
          || !Validator.length(_this.teacher.intro, "简介", 1, 500)
        ) {
          return;
        }

        _this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/save', _this.teacher).then((resp) => {
          if (resp.data.success) {
            //  关闭模态框
            $("#form-modal").modal('hide')
            //  刷新表格
            _this.list(1)
            Toast.success('保存成功！')
          } else {
            Toast.warning(resp.data.message)
          }
        })
      },

      /**
       * 删除讲师（根据id）
       * @param id
       */
      del(id) {
        let _this = this
        Confirm.show('删除讲师后不可恢复，是否确认删除？', () => {
          _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/teacher/delete/' + id).then((resp) => {
            if (resp.data.success) {
              //  刷新表格
              _this.list(1)
              Toast.success('删除成功！')
            }
          })
        })
      },

      /**
       * 上传文件组件的回调函数
       * @param resp
       */
      //  注意这种要用在其他组件, 并且需要接收其他组件的参数的回调函数,
      //  在html代码中调用时不要加(), 比如afterUpload(),
      //  这样会导致afterUpload(resp) 的resp接收的是这个组件传给它的参数
      afterUpload(resp) {
        let _this = this
        let image = resp.data.content.path
        _this.teacher.image = image
      }
    }
  }
</script>

<style scoped>

</style>